<!DOCTYPE html>
<html>
    <head>
        <title>RAGE N FURIOUS</title>
        <meta charset="utf-8" />
        <link rel=stylesheet type="text/css" href="http://rbeuque74eu.blob.core.windows.net/files/css/style.css">
        <?php if(isset($game_id)){ ?>
        <script> var c = new Array();
            c["game_id"] =  <?php echo $game_id; ?>;
            c["dyn"] = true;
            c["watch"] = <?php if($playing){echo "false;";} else { ?>{"pseudo" : "<?php echo $watchPseudo["pseudo"]; ?>", "hash" : "<?php echo $this->session->userdata("session_id"); ?>"}; <?php } ?>
            c["channel"] = { "saut" : "saut"+c["game_id"] , "chat" :"chat"+c["game_id"] }
            c["me"] = { "pseudo" : "<?php echo $player["me"]["pseudo"]; ?>", "perso" : <?php echo $player["me"]["perso"]; ?>, "hash" : "<?php echo $player["me"]["hash"]; ?>"  }
            c["op"] = { "pseudo" : "<?php echo $player["op"]["pseudo"]; ?>", "perso" : <?php echo $player["op"]["perso"]; ?>, "hash" : "<?php echo $player["op"]["hash"]; ?>"  }</script> <?php } ?>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/init_index.js"></script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/push_package_index.js"></script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/chat_bulle_index.js"></script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/gameplay_index.js"></script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/timer_index.js"></script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/items_index.js"></script>
        <script type="text/javascript" src="http://rbeuque74eu.blob.core.windows.net/files/js/saut_collision_index.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" ></script>
        <link rel=stylesheet type="text/css" href="/files/css/jquery-ui/jquery-ui-1.8.19.custom.css" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
        <style>
            .ui-dialog .ui-dialog-title, .ui-dialog .ui-button, .ui-dialog #dialog-confirm-invite , .ui-dialog #dialog-message-ready , .ui-dialog #dialog-message-decline { font-size:12px;}
        </style>
    </head>

    <body id="body">
        <div id="principal">#r336
            <span id="alert_message" style="color:red;"></span>
			
            <div class="game" id="player1">
                <div id="bar-player1">
                    <img id="vie-1-joueur" src="/files/images/vie.png" alt="Vie" style=" margin-top:3px; margin-left:5px;"/>
                    <img id="vie-2-joueur" src="/files/images/vie.png" alt="Vie" />
                    <img id="vie-3-joueur" src="/files/images/vie.png" alt="Vie" />
                    <div id="subragebar">
                            <div id="ragebar-joueur" class="ragebar"><span id="text-ragebar-joueur" class="text">100%</span></div>
                    </div>
                    <div style="clear:left; display:inline;"></div>
                    <div id="subfuriousbar">
                            <div id="furiousbar-joueur" class="furiousbar"><span id="text-furiousbar-joueur" class="text">0%</span></div>
                    </div>
                    <img id="firebar1" src="/files/images/firebar.png" alt="FireBullet" class="iconeTop" style=" margin-left:210px;"/>
                    <span id="nb-firebullet-joueur" class="textTop" >x5</span>
                    <img id="teleport1" class="iconeTop" src="/files/images/tp.png" alt="Teleport" />
					<span id="nb-teleport-joueur" class="textTop" >x5</span>
                    <img id="heal1" class="iconeTop" src="/files/images/healbar.png" alt="Heal" />
					<span id="nb-heal-joueur" class="textTop" >x5</span>
                    <img id="steal1" class="iconeTop" src="/files/images/stealbar.png" alt="Steal" />
					<span id="nb-steal-joueur" class="textTop" >x1</span>
                    <img id="special1" class="iconeTop"  src="/files/images/star.png" alt="Special" />
					<span id="nb-special-joueur" class="textTop" >x4</span>
                    <span id="chrono" class="textTop" style="display:inline;color:white;font-size:0.9em;margin:0px 0px 5px 20px;top:-4px;">00:00</span>
                    <span id="pseudo-joueur" class="textTop" style="display:inline;color:white;font-size:0.9em;margin:6px 5px 5px 0px;float:right;">Loading</span>
                </div>
				<canvas id="canvas-joueur" height="200" width="880" style="position:absolute;">
					<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
				</canvas>
                <div id="playground-player1" style="height:200px;">
                </div>
            </div>
			<div style="clear:left; display:inline;"></div>
			
            <div id="player-dist" class="game">
                <div id="bar-player-dist">
                    <img id="vie-1-joueur-dist" src="/files/images/vie.png" alt="Vie" style=" margin-top:3px; margin-left:5px;"/>
                    <img id="vie-2-joueur-dist" src="/files/images/vie.png" alt="Vie" />
                    <img id="vie-3-joueur-dist" src="/files/images/vie.png" alt="Vie" />
                    <div id="subragebar">
                            <div id="ragebar-joueur-dist" class="ragebar"><span id="text-ragebar-joueur-dist" class="text">100%</span></div>
                    </div>
                    <div style="clear:left; display:inline;"></div>
                    <div id="subfuriousbar">
                            <div id="furiousbar-joueur-dist" class="furiousbar"><span id="text-furiousbar-joueur-dist" class="text">0%</span></div>
                    </div>
                    <img id="firebar12" class="iconeTop" src="/files/images/firebar.png" alt="FireBullet" style="margin-left:210px;"/>
					<span id="nb-firebullet-joueur-dist" class="textTop">x5</span>
                    <img id="teleport12" class="iconeTop" src="/files/images/tp.png" alt="Teleport" />
					<span id="nb-teleport-joueur-dist" class="textTop">x5</span>
                    <img id="heal12" class="iconeTop" src="/files/images/healbar.png" alt="Heal" />
					<span id="nb-heal-joueur-dist" class="textTop">x5</span>
                    <img id="steal12" class="iconeTop" src="/files/images/stealbar.png" alt="Heal" />
					<span id="nb-steal-joueur-dist" class="textTop">x1</span>
                    <img id="special12" class="iconeTop" src="/files/images/star.png" alt="Special" />
					<span id="nb-special-joueur-dist" class="textTop">x4</span>
                    <span id="pseudo-joueur-dist" style="display:inline;color:white;font-size:0.9em;float:right;margin:0px 5px 5px 0px;">Loading</span>
                </div>
				<canvas id="canvas-joueur-dist" height="220" width="880" style="position:absolute;">
					<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
				</canvas>
                <div id="playground-player-dist" style="height:200px;">
						<svg name="bulle" id="bulle" width="250" height="40" version="1.1"
							xmlns="http://www.w3.org/2000/svg">
							<rect x="0" y="0" width="250" height="40" rx="15" fill="white" stroke="3"/>
							 <text id='text' x="20" y="25" style="fill:black;">Loading</text>
						</svg>
                </div>
            </div>
            <div id="chat-box">
                    <p id="chat-view"></p>
                    <input type="text" name="message" id="message" style="width:830px; position:relative;"/>
                    <input type="button" id="envoyer" value="Envoyer"></input>
            </div>
            <audio controls="controls" preload="auto" id="audio" style="display:none;">
                <source src="http://rbeuque74eu.blob.core.windows.net/files/sounds/pm_receive.ogg" type="audio/ogg" id="audio-src-ogg" />
                <source src="http://rbeuque74eu.blob.core.windows.net/files/sounds/pm_receive.mp3" type="audio/mpeg" id="audio-src-mp3" />
                <source src="http://rbeuque74eu.blob.core.windows.net/files/sounds/pm_receive.wav" type="audio/x-wav" id="audio-src-wav" />
                Votre navigateur ne gère pas la balise audio !
            </audio>
            <div style="display:none;" id="dialog-message-loose" title="YOU LOOSE!">
                <p><span class="ui-icon ui-icon-circle-cancel" style="float:left; margin:0 7px 20px 0;"></span>Vous avez <strong>perdu</strong> ! <br />Vous allez être redirigé dès que vous cliquez sur OK.</p>
            </div>
            <div style="display:none;" id="dialog-message-win" title="YOU WIN">
                <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 20px 0;"></span>VOUS AVEZ <strong>GAGN&Eacute;</strong> !<br />Bien joué mon petit, vous pouvez retourner sur la liste des parties en cliquant sur OK.</p>
            </div>
			<div style="display:none; "id="dialog-confirm-invite" title="Invitation à jouer">
				<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Vous avez reçu une invitation de la part de <strong id="dialog-confirm-invite-pseudo"></strong>. Si vous acceptez, vous serez redirigé vers la salle de jeu.</p>
			</div>
			<div style="display:none; "id="dialog-message-ready" title="Votre invitation à jouer">
				<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 20px 0;"></span><strong id="dialog-message-ready-pseudo"></strong> a accepté votre invitation, vous allez être redirigé vers la salle de jeu.</p>
			</div>
			<div style="display:none; "id="dialog-message-decline" title="Votre invitation à jouer">
				<p><span class="ui-icon ui-icon-circle-close" style="float:left; margin:0 7px 20px 0;"></span><strong id="dialog-message-decline-pseudo"></strong> a décliné votre invitation.</p>
			</div>
        </div>
		
        <div pub-key="pub-0607ceaa-239b-4ab8-a2c9-2e6a28ae3c0d" sub-key="sub-eb735185-9d22-11e1-bedd-67aa31f82715" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div> 
        <script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
        <script>(function(){
                // LISTEN FOR MESSAGES
                PUBNUB.subscribe({
                        channel	 : c["channel"].saut,              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushMessage(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                                document.getElementById("alert_message").innerHTML = "Attention, perte de la connectivité!";
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                                document.getElementById("alert_message").innerHTML = "";
                        },
                        connect    : function() {        // CONNECTION ESTABLISHED.
 <?php if($playing) { ?>
                            PUBNUB.publish({             // SEND A MESSAGE.
                                channel : c["channel"].saut,
                                message : { 
                                    "type" : "init_ok",
                                    "ident" : v["joueur"].ident,
					                "pseudo" : v["joueur"].pseudo,
                                    "vie": v["joueur"].vies,
                                    "rage":v["joueur"].rage,
                                    "furious":v["joueur"].furious,
                                    "isShield":v["weapon"].Shield.enable,
                                    "nbShield":v["weapon"].Shield.number,
                                    "nbBullet":v["weapon"].FireBullet.number,
                                    "nbHeal":v["weapon"].Heal.number,
                                    "nbSpecial":v["weapon"].Special.number,
                                    "bgPos" : v["joueur"].backgroundPos,
                                    "background" : v["joueur"].backgroundId, 
                                    "perso" : v["joueur"].persoId,
                                    "pattern" : v["pattern"],
                                    "col" : v["joueur"].col,
                                    "ligne" : v["joueur"].ligne
                                }
                            })
 <?php } ?>
                        }
                })
				PUBNUB.subscribe({
                        channel	 : c["channel"].chat,              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushChatMessage(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                                document.getElementById("alert_message").innerHTML = "Attention, perte de la connectivité!";
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                                document.getElementById("alert_message").innerHTML = "";
                        }
                })
<?php if(!$playing){ ?>
				PUBNUB.subscribe({
                        channel	 : "user-<?php echo $this->session->userdata('session_id'); ?>",              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                switch(message.type)
								{
									case "invite" :
										$( "#dialog:ui-dialog" ).dialog( "destroy" );
										$('#dialog-confirm-invite').attr('title', 'Invitation de '+message.pseudo);
										$('#dialog-confirm-invite-pseudo').html(message.pseudo);
										$("#dialog-confirm-invite").dialog({
												resizable: true,
												modal: true,
												buttons: {
														"Accepter l'invitation": function() {
																$.getJSON('/game/create/'+c["watch"].hash+'/'+message.hash, function (data){
																	if(data.erreur == 0){
																		PUBNUB.publish({
																			channel : "user-"+message.hash,
																			message : {
																					"type" : "readyAfterInvite",
																					"pseudo" : c["watch"].pseudo,
																					"hash" : c["watch"].hash,
																					"room_id" : data.room_id
																				}
																		});
																		PUBNUB.publish({
																			channel : "user-"+c["watch"].hash,
																			message : {
																					"type" : "readyAfterInvite",
																					"pseudo" : c["watch"].pseudo,
																					"hash" : c["watch"].hash,
																					"room_id" : data.room_id
																				}
																		});
																	} else {
																		alert(data.message);
																	}
																});
																$( this ).dialog( "close" );
														},
														"Décliner": function() {
																PUBNUB.publish({
																	channel : "user-"+message.hash,
																	message : {
																			"type" : "declinedInvite",
																			"pseudo" : c["watch"].pseudo,
																			"hash" : c["watch"].hash
																		}
																});
																$( this ).dialog( "close" );
														}
												}
										});
										break; 
									case "readyAfterInvite" :
										$( "#dialog:ui-dialog" ).dialog( "destroy" );
										$('#dialog-message-ready-pseudo').html(message.pseudo);
										$("#dialog-message-ready").dialog({
												resizable: false,
												modal: true,
												buttons: {
														Ok: function() {
																$( this ).dialog( "close" );
														}
												}
										});
										window.location.href = "/game/index/"+message.room_id;
										break;
										
									case "declinedInvite" :
										$( "#dialog:ui-dialog" ).dialog( "destroy" );
										$('#dialog-message-decline-pseudo').html(message.pseudo);
										$("#dialog-message-decline ").dialog({
												resizable: false,
												modal: true,
												buttons: {
														Ok: function() {
																$( this ).dialog( "close" );
														}
												}
										});
									break;
								}
                        },

                        disconnect : function() {       // LOST CONNECTION.
                               /* alert("Connection Lost." +
                                "Will auto-reconnect when Online."
                                )*/
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                              /*  alert("And we're Back!")*/
                        }
                })
<?php } ?>
				
        })();</script>
    </body>
</html>